import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { MapView, Marker } from 'react-native-amap3d';
import { List, TextareaItem, ImagePicker, Button, Tabs } from '@ant-design/react-native';
const Item = List.Item;
const Brief = Item.Brief;
const data = [{
    url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
    id: '2121',
}, {
    url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
    id: '2122',
}];
export default class police_tabDetails extends Component {

    static navigationOptions = props => {

        return {
            headerTitle: `详情          `,
            headerTintColor: "#fff",
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
                fontSize: 16
            },
            headerStyle: {
                backgroundColor: "#6E75FF",
            }
        }
    };

    state = {
        startD: 0,
        endD: 0,
        wrap: false,
        files: data,
        multiple: false,
    }

    ondw = (nativeEvent) => {
        console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)
    }

    onqiandao = () => {
        console.log(4567896)
    }

    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    }
    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
            multiple: index === 1,
        });
    }

    onsubmit = () => {
        this.props.navigation.navigate('HomeScreen')
    }

    render() {
        const { files } = this.state;
        const tabs = [
            { title: '签到信息' },
            { title: '检查记录表' },
        ];

        return (
            <View style={{ flex: 1 }}>
                <Tabs tabs={tabs}>
                    <View style={{ flex: 1, justifyContent: 'center', backgroundColor: "#ccc" }}>
                        <View style={{ marginBottom: 10 }}>
                            <List>
                                <Item extra="站点签到" arrow="empty">
                                    签到类型
                        </Item>
                                <Item extra="2018/12/21" arrow="empty">
                                    签到时间
                        </Item>
                                <Item extra="XXXXXXXX" arrow="empty">
                                    签到地点
                        </Item>
                                <Item disabled extra="箭头向右7894561164646" arrow="horizontal" wrap={this.state.wrap} onPress={() => { this.setState({ wrap: !this.state.wrap }) }}>
                                    签到备注
                        </Item>
                            </List>
                        </View>

                        <View style={{ flex: 1, backgroundColor: "#fff" }}>
                            <View>
                                <List>
                                    <Item>
                                        任务备注
                        </Item>
                                </List>
                            </View>
                            <View style={{ flex: 1 }}>
                                <TextareaItem rows={4} placeholder="最多输入100个字" count={100} editable={false} />
                                <ImagePicker
                                    files={files}
                                    onChange={this.onChange}
                                    onImageClick={(index, fs) => console.log(index, fs)}
                                    selectable={files.length < 7}
                                    multiple={this.state.multiple}
                                    selectable={false}
                                />

                            </View>

                        </View>
                    </View>
                    <View >
                        <Text>Content of Second Tab</Text>
                    </View>
                  
                </Tabs>
            </View>

        )
    }
}